<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import getRequest, { downloadFiles } from '../../utils/lxw_request';

const router = useRouter();

function goToTeamHall() {
    router.push({ path: '/team_hall' })
}

// route params name is subject_id
const course_id = router.currentRoute.value.params['subject_id'];
let course = ref(null);
getCourse();


function getCourse() {
    getRequest(`/stu/course/${course_id}`, "GET", new Headers({ 'Content-Type': 'application/json' }))
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                course.value = json.data;
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

function applyToJoin() {
    if (course.value['isJoin']) {
        return;
    }

    getRequest(`/stu/course/${course_id}`, "POST", new Headers({ 'Content-Type': 'application/json' }))
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                alert("加入课程成功");
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

</script>

<template>
    <div class="subject-container">

        <div class="subject" v-if="course != null">
            <div class="subject-content">
                <p style="font-size: 32px;">
                <div class="prefix">课题</div>{{ course['courseName'] }}</p>
                <p style="font-size: 22px;">
                <div class="prefix">指导老师</div>{{ course['teachers'].reduce((pre, cur) => `${pre} ${cur['name']}`, "") }}</p>
                <div class="detail_and_requirement">
                    <p>课题详情及要求</p>
                    <!-- <button type="button">课程目录</button> -->
                </div>
                <div class="subject-detail">
                    <div class="detail">
                        <p>准备</p>
                        <p>{{ course['coursePre'] }}</p>
                    </div>
                    <div class="detail">
                        <p>要求</p>
                        <p>{{ course['courseReq'] }}</p>
                    </div>
                </div>
            </div>
            <div class="subject-appendix">
                <p>课题附件</p>
                <div class="appendix-file">
                    <ul>
                        <li v-for="file in course['files']"><span class="file-link"
                                @click="downloadFiles(file['fileId'], file['fileName'])">{{ file['fileName'] }}</span></li>

                    </ul>
                </div>
                <p>加入方式</p>
                <div class="join">
                    <div>
                        <button type="button" @click="applyToJoin" class="personal" :class="{ disabled: course['isJoin'] }">{{
                            course['isJoin'] ? "已加入" : "个人加入" }}</button>
                        <!-- <button type="button" class="team" @click="goToTeamHall">团队加入</button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style scoped>
.subject-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.subject {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    width: 1057px;
    height: 662px;
    flex-wrap: wrap;
    margin: 50px 0;
    border-radius: 10px;
}


/* 课题的名称 指导老师 细节和要求 */
.subject-content,
.subject-appendix {
    width: 50%;
    height: 100%;
    padding: 35px;
}

.subject-content p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* .subject-content p::after {
    content: ": ";
} */

.prefix {
    display: inline-block;
}

.prefix::after {

    content: ": ";
}

/*  课程详情及要求 */
.subject-content .detail_and_requirement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.subject-content .detail_and_requirement p {
    margin: 0;
}

.subject-content .detail_and_requirement button {
    width: 120px;
    height: 37px;
    padding: 0;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-family: Source Han Sans CN;
    font-size: 18px;
    text-align: center;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    user-select: none;

}

.subject-content .detail_and_requirement button:hover {
    opacity: 0.85;
}

.subject-content .detail_and_requirement button:active {
    transform: translateY(3px);
}

/*  细节 要求 */
.subject-detail {
    background-color: #e2e2e2;
    height: 450px;
    padding: 24px 33px;
}

.detail {
    margin-bottom: 18px;
}

.detail p {
    font-size: 14px;
    font-weight: normal;
}

.detail p:first-child {
    font-size: 18px;
    margin-bottom: 18px;
    font-weight: bold;
}


/* 课题的附件 和 加入方式 */
.subject-appendix p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* .subject-appendix p::after {
    content: ": ";
} */

.subject-appendix .appendix-file {
    height: 200px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    margin-bottom: 25px;
}

.subject-appendix .appendix-file>ul>li {
    list-style: none;
    height: 32px;

}

.subject-appendix .appendix-file>ul>li::before {
    content: url("/src/assets/images/student/file.svg");
    vertical-align: middle;
}

.file-link {
    display: inline-block;
    text-decoration: underline;
    color: #0000EE;
    cursor: pointer;
    opacity: 0.7;
}

.file-link:hover {
    opacity: 1;
}

.file-link:visited {
    color: #872bff;
}

.subject-appendix .join {
    height: 200px;
    padding: 12px;
    margin-bottom: 25px;
    background-color: rgba(219, 221, 227, 0.5);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: center;
    align-items: center;
}

.subject-appendix .join button {
    display: block;
    width: 196px;
    height: 37px;
    border-radius: 6px;
    padding: 0;
    font-family: Source Han Sans CN;
    font-size: 18px;
    background-color: transparent;
    margin: 6px 0;
    cursor: pointer;
    user-select: none;
    text-align: center;

}

.subject-appendix .join button:hover {
    opacity: 0.85;
}


.subject-appendix .join button:active {
    transform: translateY(3px);
}

.subject-appendix .join button.personal {
    border: solid 1px #707070;
    color: #707070;
}

.subject-appendix .join button.team {
    border: none;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    color: #ffffff
}

.subject-appendix .join button.disabled {
    cursor: not-allowed;
}

.subject-appendix .join button.disabled:active {
    transform: unset;
}</style>